<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link rel="stylesheet" href="https://at.alicdn.com/t/font_1474698_y6ibtrloqcn.css">
    <link rel="stylesheet" href="../../css/common.css">
    <title>首页</title>
    <style>
        .header .middle{
            width:5.7rem;
            height:.7rem;
            background:rgba(250,250,250,1);
            border-radius:.1rem;
        }
        .header .middle .iconsousuo{
            color: #999999;
            margin-left: .28rem;
            margin-right: .29rem;
        }
        .header .middle input{
            height: 100%;
        }
        .main{
            padding-bottom: .2rem;
        }
        .banner{
            width: 100%;
            height: 3.6rem;
        }
        .menu .item{
            width: 25%;
            height: auto;
            margin-top: .5rem;
        }
        .menu .item img{
            width: .9rem;
            height: .9rem;
            margin-bottom: .15rem;
        }
        .menu .item .txt{
            width: 100%;
            text-align: center;
            height: auto;
            font-size:.24rem;
            font-family:PingFang SC;
            font-weight:400;
            color:rgba(26,26,26,1);
        }
        .list-box{
            width: 100%;
            height: auto;
            padding: 0 .28rem;
        }
        .list-box .title{
            width: 100%;
            height: 1.43rem;
            position: relative;
        }
        .list-box .title .line{
            width: 4rem;
            height: .02rem;
            position: absolute;
            left: 0;
            right: 0;
            top:0;
            bottom: 0;
            margin: auto;
        }
        .list-box .title .middle-txt{
            width: 2.6rem;
            height:100%;
            background-color: #fff;
            position: absolute;
            left: 0;
            right: 0;
            top:0;
            bottom: 0;
            margin: auto;
        }
        .list-box .title .middle-txt .iconfont{
           margin-right: .2rem;
        }
        .list-box .title .middle-txt span{
            font-size:.36rem;
            font-family:PingFang SC;
            font-weight:bold;
        }
        .list-box .title .more{
            width: .6rem;
            text-align: center;
            position: absolute;
            right: .28rem;
            top: 0;
            bottom: 0;
            margin: auto;
            font-size:.24rem;
            font-family:PingFang SC;
            font-weight:400;
            color:rgba(153,153,153,1);
            line-height: 1.43rem;
        }
        .list-box .no-shopdata{
            width: 100%;
            height: 2rem;
            padding: 0 .5rem; 
            background:rgba(255,255,255,1);
            border:1px solid rgba(230,230,230,1);
            border-radius:.04rem;
        }
        .list-box .no-shopdata img{
            width: .66rem;
            height: .6rem;
            margin-right: .5rem;
        }
        .list-box .no-shopdata .txt{
            font-size:.28rem;
            font-family:PingFang SC;
            font-weight:400;
            color:rgba(204,204,204,1);
        }
        /* list1 */
        .list-box .list{
            width: 100%;
            height: auto;
        }
        .list-box .list .item{
            width: 100%;
            border-radius: .1rem;
            overflow: hidden;
            margin-bottom: .6rem;
        }
        .list-box .list1 .left{
            width:1.46rem;
            height:1.46rem;
            border-radius: .1rem;
            margin-right: .3rem;
        }
        .list-box .list1 .right{
            height: 1.46rem;
            overflow: hidden;
        }
        .list-box .list1 .right-a{
            width: 100%;
            height:auto;
            font-size:.28rem;
            font-family:PingFang SC;
            font-weight:bold;
            color:rgba(26,26,26,1);
        }
        .list-box .list1 .right-b{
            width: 100%;
            height: auto;
        }
        .list-box .list1 .right-b .shop-price{
            font-size:.36rem;
            font-family:PingFang SC;
            font-weight:bold;
            color:rgba(26,26,26,1);
            margin-right: .2rem;
        }
        .list-box .list1 .right-b .shop-price span{
            font-size: .24rem;
        }
        .list-box .list1 .right-b .market-price{
            font-size: .24rem;
            font-family:PingFang SC;
            font-weight:400;
            text-decoration:line-through;
            color:rgba(153,153,153,1);
        }
        .list-box .list1 .right-c{
            width: 100%;
            font-size:.24rem;
            font-family:PingFang SC;
            font-weight:400;
            color:rgba(153,153,153,1);
        }
        /* list2 样式 */
        .list-box .list2 .item{
            width: 3.37rem;
            height: auto;
            border-radius: .1rem;
            overflow: hidden;
            margin-bottom: .4rem;
        }
        .list-box .list2 .left{
            width: 100%;
            height: 3.7rem;

        }
        .list-box .list2 .right{
            width: 100%;
            height:auto;
        }
        .list-box .list2 .right-a{
            font-size:.28rem;
            font-family:PingFang SC;
            font-weight:bold;
            color:rgba(26,26,26,1);
            margin-top: .24rem;
            margin-bottom: .12rem;
        }
        .list-box .list2 .right-b{
            font-size:.24rem;
            font-family:PingFang SC;
            font-weight:400;
            text-decoration:line-through;
            color:rgba(153,153,153,1);
        }
        .list-box .list2 .right-c{
            width: 100%;
            height: auto;
            margin-top:.12rem;
        }
        .list-box .list2 .right-c .shop-price{
            font-size:.36rem;
            font-family:PingFang SC;
            font-weight:bold;
            color:rgba(26,26,26,1);
            margin-right: .2rem;
        }
        .list-box .list2 .right-c .shop-price span{
            font-size: .24rem;
        }
        .list-box .list2 .right-c .sales{
            font-size:.24rem;
            font-family:PingFang SC;
            font-weight:400;
            color:rgba(153,153,153,1);
        }
    </style>
</head>
<body>
    <div id="root">
        <header class="header flex align-items space-around">
            <div class="back fn-ctr">
                <img src="../../image/index_code.png">
            </div>
            <div class="middle flex1 flex align-items flex-start">
                <i class="iconfont iconsousuo"></i>
                <input class="flex1" type="text" placeholder="热门显示" disabled>
            </div>
            <div class="right fn-ctr">
                <img src="../../image/index_chat.png">
            </div>
        </header>
        <div class="main">
            <div class="banner">
                <img src="../../image/banner.png" alt="">
            </div>
            <div class="menu flex flex-wrap align-items flex-start">
                <div class="item">
                    <img src="../../image/index_chat.png" alt="">
                    <div class="txt">家居生活</div>
                </div>
                <div class="item">
                    <img src="../../image/index_chat.png" alt="">
                    <div class="txt">家居生活</div>
                </div>
                <div class="item">
                    <img src="../../image/index_chat.png" alt="">
                    <div class="txt">家居生活</div>
                </div>
                <div class="item">
                    <img src="../../image/index_chat.png" alt="">
                    <div class="txt">家居生活</div>
                </div>
                <div class="item">
                    <img src="../../image/index_chat.png" alt="">
                    <div class="txt">家居生活</div>
                </div>
                <div class="item">
                    <img src="../../image/index_chat.png" alt="">
                    <div class="txt">家居生活</div>
                </div>
            </div>
            <div class="list-box">
                <div class="title">
                    <div class="line sys-bgcolor"></div>
                    <div class="middle-txt flex align-items flex-center">
                        <i class="iconfont iconremen sys-fscolor"></i>
                        <span class="sys-fscolor">热卖榜单</span>
                    </div>
                    <span class="more">more</span>
                </div>
                <div class="list list1">
                    <div class="item flex align-items space-between">
                        <div class="left flex-shrink">
                            <img src="../../image/goods1.png" alt="">
                        </div>
                        <div class="right flex1 flex flex-wrap align-content-between">
                            <div class="right-a ellipse">LOVO家纺丝滑柔软缎纹轻奢床品套件LOVO家纺丝滑柔软缎纹轻奢床品套件</div>
                            <div class="right-b flex align-items flex-start">
                                <div class="shop-price sys-fscolor"><span>￥</span>859.9</div>
                                <div class="market-price">￥1290.6</div>
                            </div>
                            <div class="right-c">已有102人进行购买</div>
                        </div>
                    </div>
                    <div class="item flex align-items space-between">
                        <div class="left">
                            <img src="../../image/goods1.png" alt="">
                        </div>
                        <div class="right flex1 flex flex-wrap align-content-between">
                            <div class="right-a ellipse1">LOVO家纺丝滑柔软缎纹轻奢床品套件</div>
                            <div class="right-b flex align-items flex-start">
                                <div class="shop-price sys-fscolor"><span>￥</span>859.9</div>
                                <div class="market-price">￥1290.6</div>
                            </div>
                            <div class="right-c">已有102人进行购买</div>
                        </div>
                    </div>
                </div>
                <!-- <div class="no-shopdata flex align-items space-between">
                    <img src="../../image/no_data1.png" alt="">
                    <div class="txt flex1">宝贝推广区，可展示重点推广宝贝</div>
                </div> -->
            </div>
            <div class="list-box">
                <div class="title">
                    <div class="line sys-bgcolor"></div>
                    <div class="middle-txt flex align-items flex-center">
                        <i class="iconfont icontemaishixin sys-fscolor"></i>
                        <span class="sys-fscolor">特卖榜单</span>
                    </div>
                    <span class="more">more</span>
                </div>
                <div class="list list2 flex align-items flex-wrap space-between">
                    <div class="item">
                        <div class="left">
                            <img src="../../image/goods2.png" alt="">
                        </div>
                        <div class="right">
                            <div class="right-a ellipse2">umbra花盆创意装饰多umbra花盆创意装饰多umbra花盆创意装饰多umbra花盆创意装饰多dddddd</div>
                            <div class="right-b">￥566.00</div>
                            <div class="right-c flex align-items space-between">
                                <div class="shop-price sys-fscolor"><span>￥</span>859.9</div>
                                <div class="sales">已售56</div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="no-shopdata flex align-items space-between">
                    <img src="../../image/no_data1.png" alt="">
                    <div class="txt flex1">宝贝推广区，可展示重点推广宝贝</div>
                </div>
            </div>
        </div>
    </div>
    <script src="../../js/api.js"></script>
    <script src="../../js/vue-components.js"></script>
    <script src="../../js/vue.js"></script>
    <script src="../../js/common.js"></script>
</body>
</html>